<template>
  <draggable :list="tasks" :group="{ name: 'g1' }" class="dragArea" tag="ul">
    <li v-for="el in tasks" :key="el.title">
      <p>{{ el.title }}</p>
      <p>sdhua</p>
      <nested-draggable :tasks="el.children" />
      <p>sadasd</p>
    </li>
  </draggable>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  name: 'NestedDraggable',
  components: {
    draggable
  },
  props: {
    tasks: {
      required: true,
      type: Array
    }
  }
}
</script>
<style scoped>
.dragArea {
  min-height: 50px;
  outline: 1px dashed;
}
</style>
